<script setup lang='ts'>
import { getMessageLikeList } from '@/api/message';
import { MessageType } from '@/models/like';
import { Ref, ref } from 'vue';


const likeList:Ref<MessageType[]> = ref([])
const currentPage = ref(0)
const getLikeList = async () => {
  const res = await getMessageLikeList(currentPage.value)
  if(res.data.code === 0){ 
    if(res.data.data.records.length>0){
      likeList.value.push(...res.data.data.records)
      load.value =false
    }else{
      finished.value = true
    }
  }
}

// 列表下滑加载更多
const finished = ref(false)
const load = ref(false)
const onLoad = async () => {
    currentPage.value++
    await getLikeList()
}
// 下拉刷新
const loading = ref(false)
const onRefresh = () => {
  setTimeout(async () => {
    loading.value = false;
    currentPage.value = 1
    likeList.value = []
    await getLikeList()
  }, 1000);
}
</script>
<template>
  <van-sticky>
    <van-nav-bar
      title="点赞"
      left-arrow
      @click-left="$router.back()"
    >
    </van-nav-bar>
  </van-sticky>
  <van-pull-refresh v-model="loading" @refresh="onRefresh"  success-text="刷新成功">
    <van-list
      v-model:loading="load"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <template #finished>
        <span v-if="likeList && likeList.length!==0">没有更多了</span>
      </template>
      <UserLikeList :likeList="likeList"></UserLikeList>
    </van-list>
    <van-empty
      v-if="likeList.length===0"
      style="margin-top: 100px;"
      image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
      image-size="80"
      description="暂无其他点赞消息"
    />
  </van-pull-refresh>
</template>
<style scoped >
</style>
